<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zepto</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            background:#ccc;
        }
        #box {
            width:200px;
            height:200px;
            background:#00f;
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <script type="text/javascript" src="node_modules/zepto/dist/zepto.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var oDiv = $('#box');
            //var position = oDiv.position();
            var x = oDiv.position().left;
            var y = oDiv.position().top;

            oDiv.on('touchstart',function(e){
                var disX = e.targetTouches[0].clientX - x;
                var disY = e.targetTouches[0].clientY - y;
                $(document).on('touchmove',touchMove);
                $(document).on('touchend',touchEnd);
                function touchMove(e){
                    x = e.targetTouches[0].clientX - disX;
                    y = e.targetTouches[0].clientY - disY;
                    oDiv.css('-webkit-transform','translate3d('+x+'px,'+y+'px,0)');
                }
                function touchEnd(){
                    $(document).off('touchmove',touchMove);
                    $(document).off('touchend',touchEnd);
                }
                e.preventDefault();//解决文档动
            })
        })
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>